<link rel="stylesheet" href="/static/editor.md/css/editormd.min.css"/>
<div class="layui-layout layui-layout-admin" style="padding-left: 40px;margin-top: 20px;">
    <form class="layui-form" action="" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-inline" style="width: 400px">
                <input type="text" name="title" id="api_url" lay-verify="required" autocomplete="off"
                       placeholder="" class="layui-input" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类</label>
            <div class="layui-input-block">
                <select name="category_id" lay-filter="aihao">
                    {{range .category}}
                        <option value="{{.id}}" {{if .select}}selected{{end}}>{{.name}}</option>
                    {{end}}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标签</label>
            <div class="layui-input-inline" style="width: 400px">
                <input type="text" name="tags" id="tags" lay-verify="required" autocomplete="off"
                       placeholder="" class="layui-input" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">博客正文</label>
            <div class="layui-input-inline" id="api-editormd" style="border: 1px solid #e4e4e4">
<textarea name="content" style="display:none;">
</textarea>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="sub">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script>
    let templates = {{.templates}};
    let apiEditor;
    layui.use(['form', 'element', 'table', 'layer', 'jquery'], function () {
        let form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
        let $ = layui.jquery;
        let table = layui.table;
        form.on('submit(sub)', function (data) {
            $.ajax({
                url: '/admin/api/blog/create',
                type: "POST",
                data: data.field,
                dataType: "json",
                beforeSend: function () {
                    load = layer.load(2);
                },
                complete: function () {
                    layer.close(load)
                },
                success: function (data) {
                    if (data.code === 1) {
                        // 关闭弹出层
                        layer.msg(data.message, {icon: 1, title: "success"}, function () {
                            let iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                        });
                    } else {
                        layer.msg(data.message, {icon: 2, title: "error"})
                    }
                }
            });
            return false;
        });

        form.on('select(templates)', function (data) {
            layer.confirm('是否切换模板？', {
                btn: ['确定', '取消'] //可以无限个按钮
                , btn2: function (index, layero) {
                    layer.close(index);
                }
            }, function (index, layero) {
                $.each(templates, function (k, v) {
                    if (v.Id == data.value) {
                        apiEditor.setMarkdown(v.Detail)
                    }
                });
                layer.close(index);
            });

        });
        //但是，如果你的HTML是动态生成的，自动渲染就会失效
        //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
        form.render();
    });
</script>

{{template "public/editormd.html" .}}